<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="./1.ico">
	<style type="text/css">
	</style>
  </head>
  <body>	  
    <div id="app">
		<!-- <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index:1; pointer-events: none;"></canvas>	 烟花 --> 
	</div>
  </body>
<!--  <script>
		window.onkeydown = window.onkeyup = window.onkeypress = function (event) {	//禁用f12
		     // 判断是否按下F12，F12键码为123
		     if (event.keyCode == 123) {
		     event.preventDefault(); // 阻止默认事件行为
		     window.event.returnValue = false;
		     }
		}
              //鼠标点击出现烟花特效
  		class Circle {
  		  constructor({ origin, speed, color, angle, context }) {
  		    this.origin = origin
  		    this.position = { ...this.origin }
  		    this.color = color
  		    this.speed = speed
  		    this.angle = angle
  		    this.context = context
  		    this.renderCount = 0
  		  }
  		
  		  draw() {
  		    this.context.fillStyle = this.color
  		    this.context.beginPath()
  		    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
  		    this.context.fill()
  		  }
  		
  		  move() {
  		    this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
  		    this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
  		    this.renderCount++
  		  }
  		}
  		
  		class Boom {
  		  constructor ({ origin, context, circleCount = 10, area }) {
  		    this.origin = origin
  		    this.context = context
  		    this.circleCount = circleCount
  		    this.area = area
  		    this.stop = false
  		    this.circles = []
  		  }
  		
  		  randomArray(range) {
  		    const length = range.length
  		    const randomIndex = Math.floor(length * Math.random())
  		    return range[randomIndex]
  		  }
  		
  		  randomColor() {
  		    const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
  		    return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
  		  }
  		  randomRange(start, end) {
  		    return (end - start) * Math.random() + start
  		  }
  		
  		  init() {
  		    for(let i = 0; i < this.circleCount; i++) {
  		      const circle = new Circle({
  		        context: this.context,
  		        origin: this.origin,
  		        color: this.randomColor(),
  		        angle: this.randomRange(Math.PI - 1, Math.PI + 1),
  		        speed: this.randomRange(1, 6)
  		      })
  		      this.circles.push(circle)
  		    }
  		  }
  		
  		  move() {
  		    this.circles.forEach((circle, index) => {
  		      if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
  		        return this.circles.splice(index, 1)
  		      }
  		      circle.move()
  		    })
  		    if (this.circles.length == 0) {
  		      this.stop = true
  		    }
  		  }
  		
  		  draw() {
  		    this.circles.forEach(circle => circle.draw())
  		  }
  		}
  		
  		class CursorSpecialEffects {
  		  constructor() {
  		    this.computerCanvas = document.createElement('canvas')
  		    this.renderCanvas = document.createElement('canvas')
  		
  		    this.computerContext = this.computerCanvas.getContext('2d')
  		    this.renderContext = this.renderCanvas.getContext('2d')
  		
  		    this.globalWidth = window.innerWidth
  		    this.globalHeight = window.innerHeight
  		
  		    this.booms = []
  		    this.running = false
  		  }
  		
  		  handleMouseDown(e) {
  		    const boom = new Boom({
  		      origin: { x: e.clientX, y: e.clientY },
  		      context: this.computerContext,
  		      area: {
  		        width: this.globalWidth,
  		        height: this.globalHeight
  		      }
  		    })
  		    boom.init()
  		    this.booms.push(boom)
  		    this.running || this.run()
  		  }
  		
  		  handlePageHide() {
  		    this.booms = []
  		    this.running = false
  		  }
  		
  		  init() {
  		    const style = this.renderCanvas.style
  		    style.position = 'fixed'
  		    style.top = style.left = 0
  		    style.zIndex = '999999999999999999999999999999999999999999'
  		    style.pointerEvents = 'none'
  		
  		    style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
  		    style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
  		
  		    document.body.append(this.renderCanvas)
  		
  		    window.addEventListener('mousedown', this.handleMouseDown.bind(this))
  		    window.addEventListener('pagehide', this.handlePageHide.bind(this))
  		  }
  		
  		  run() {
  		    this.running = true
  		    if (this.booms.length == 0) {
  		      return this.running = false
  		    }
  		
  		    requestAnimationFrame(this.run.bind(this))
  		
  		    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
  		    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
  		
  		    this.booms.forEach((boom, index) => {
  		      if (boom.stop) {
  		        return this.booms.splice(index, 1)
  		      }
  		      boom.move()
  		      boom.draw()
  		    })
  		    this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
  		  }
  		}
  		
  		const cursorSpecialEffects = new CursorSpecialEffects()
  		cursorSpecialEffects.init()
		</script> -->
</html>
